<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <span slot="bread">Goods</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="{ 'filterby-show': filterBy }">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" :class="{ 'cur': priceChecked == '-1' }" @click="selectItem('-1')">All</a></dd>
              <dd v-for='(item, index) in priceFilter' :key="index">
                <a href="javascript:void(0)":class="{ 'cur': priceChecked == index }" @click="selectItem(index)">{{item.startPrice}} - {{item.endPrice}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item, index) in goodList" :key="index" :data-id="item.productId">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/'+item.prodcutImg" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.prodcutPrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay"  v-show="overLayFlag" @click="closePop"></div>
    <nav-footer></nav-footer>
  </div>
</template>
<script>
import './../assets/css/base.css'
import './../assets/css/product.css'
import NavHeader from '@/components/NavHeader'
import NavFooter from '@/components/NavFooter'
import NavBread from '@/components/NavBread'
export default {
  data() {
    return {
      goodList: null,
      priceFilter: [{
        startPrice: '0.00',
        endPrice: '500.00'
      },{
        startPrice: '500.00',
        endPrice: '1000.00'
      },{
        startPrice: '1000.00',
        endPrice: '2000.00'
      }],
      priceChecked: -1,
      filterBy: false,
      overLayFlag: false
    }
  },
  mounted() {
    this.$nextTick(()=> {
      this.getGoods();
    })
  },
  methods: {
    closePop() {
      this.filterBy = false;
      this.overLayFlag = false;
    },
    showFilterPop() {
      this.filterBy = true;
      this.overLayFlag = true;
    },
    selectItem(index) {
      this.priceChecked = index;
      this.closePop();
    },
    getGoods() {
      this.axios.get('/api/goods').then((result) => {
        var res = result.data;
        if (res.status == 0) {
          this.goodList = res.result;
        }
      })
    }
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread
  }
}
</script>

